@charset "utf-8";
*{
    margin:0;
    padding:0;
}
$fontSize:40;
@function r($p){
    @return $p/$fontSize*1rem;
}
@function f($fz) {
    @return $fz / 14 * 1em
}
.web_nav{
    position: fixed;
    top: 0;
    transform: translateX(0);
    z-index: 9999;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #fff;
    display:none;

    // transition: all 1s ease-in-out;
    // animation-iteration-count:1;
    animation-duration: 2s;
    >.nav_box{
       
        margin:0 auto;
        position: relative;
       
        >label{
            position: absolute;
            top:r(0);
            left:r(343)
        }
        >.ui{
            width:r(432);
            margin:0 auto;
            margin-top:r(101);
            display: flex;
            display: -webkit-flex;
            justify-content: space-between;
            // >li{
            //     width:r(90);
            //     >img{
            //         width:100%;
            //     }
            // }
        }
        >.daohang{
            width:r(432);
            margin: 0 auto;
            margin-top:135px;
         
                >a{
                display: block;
                width:100%;
                font-size:20px;
                text-align: center;
                padding-top:40px;
                padding-bottom:40px;
                border-bottom:1px #ddd solid;
                color:#000;
                text-decoration: none;
                }
            
            
        }
        >.line_content{
            display: flex;
            display: -webkit-flex;
            // justify-content: space-between;
            justify-content: center;
            align-items: center;
            width:r(489);
            margin: 0 auto;
            margin-top:r(90);
            margin-bottom:r(225);
            >li{
                font-size:16px;
            }
            >.one::before{
                content: "";
                display: inline-block;
                background:#000;
                width:r(55);
                height: 2px;
                font-weight: bold;
                vertical-align: middle;
                margin:0 r(8);
            }
            >.two::before{
                content: "";
                display: inline-block;
                background:#000;
                width:r(55);
                height: 2px;
                font-weight: bold;
                vertical-align: middle;
                margin:0 r(8);
            }
            >.two::after{
                content: "";
                display: inline-block;
                background:#000;
                width:r(55);
                height: 2px;
                font-weight: bold;
                vertical-align: middle;
                margin:0 r(8);
            }
            >.three:after{
                content: "";
                display: inline-block;
                background:#000;
                width:r(55);
                height: 2px;
                font-weight: bold;
                vertical-align: middle;
                margin:0 r(8);
            }
        }
    }
}//web

@media only screen and (max-width: 768px) {
    .web_nav{
        position: fixed;
        top: 0;
        transform: translateX(0);
        z-index: 9999;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: #fff;
        display:none;

        // transition: all 1s ease-in-out;
        // animation-iteration-count:1;
        animation-duration: 2s;
        >.nav_box{
           
            margin:0 auto;
            position: relative;
           
            >label{
                position: absolute;
                top:r(0);
                left:r(343);
                width:r(70);
                >img{
                    width:100%;
                }
            }
            >.ui{
                width:r(432);
                margin:0 auto;
                margin-top:r(101);
                display: flex;
                display: -webkit-flex;
                justify-content: space-between;
                >li{
                    width:r(70);
                    >img{
                        width:100%;
                    }
                }
            }
            >.daohang{
                width:r(432);
                margin: 0 auto;
                margin-top:30px;
                >li{
                    width:100%;
                    font-size:20px;
                    text-align: center;
                    padding-top:40px;
                    padding-bottom:40px;
                    border-bottom:1px #ddd solid;
                }
            }
            >.line_content{
                display: flex;
                display: -webkit-flex;
                // justify-content: space-between;
                justify-content: center;
                align-items: center;
                width:100%;
            }
        }
    }//web
}